<template>
  <header>
    <Card>
      <section class="mine_header">
        <van-image round width="56px" height="56px" :src="info?.avatar"  v-if="info?.avatar"/>
        <section class="mine_header_info">
          <section class="mine_header_info_name">{{ info?.nickname }}</section>
          <section class="mine_header_info_desc">{{ info?.sign }}</section>
        </section>
      </section>
    </Card>
  </header>
    <nav class="mine_nav">
      <Card>
            <section class="mine_statistics">
                <section class="mine_statistics_item">
                    <span class="mine_statistics_item_title">{{ statistics?.totalPost }}</span>
                    <span class="mine_statistics_item_text">发帖</span>
                </section>
                <section class="mine_statistics_item">
                    <span class="mine_statistics_item_title">{{ statistics?.totalComment }}</span>
                    <span class="mine_statistics_item_text">评论</span>
                </section>
                <section class="mine_statistics_item">
                    <span class="mine_statistics_item_title">{{ statistics?.totalLike }}</span>
                    <span class="mine_statistics_item_text">点赞</span>
                </section>
                <section class="mine_statistics_item">
                    <span class="mine_statistics_item_title">{{ statistics?.totalCollect}}</span>
                    <span class="mine_statistics_item_text">收藏</span>
                </section>
            </section>
      </Card>
    </nav>

  <main>
    <van-cell-group inset>
      <van-cell title="我的发帖" icon="description-o" is-link to="/my/post" />
      <van-cell title="我的收藏" icon="star-o" is-link to="/my/collect" />
      <van-cell title="个人中心" icon="idcard" is-link to="/center" />
      <van-cell title="修改密码" icon="edit" is-link to="/password" />
      <van-cell title="注销账号" icon="delete-o" is-link  @click="handleLogout"/>
      <van-cell title="退出登录" icon="warning-o" is-link  @click="handleQuit"/>
    </van-cell-group>
  </main>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { showToast, showConfirmDialog } from 'vant';
import Card from '@/components/Card/index.vue';
import { getUserInfo,userLogout,getUserStatistics } from '@/apis/user';

const router = useRouter();

const info = ref({});
const statistics = ref({});

const init = async () => {
  try {
    const { data = {} } = await getUserInfo();
    info.value = data;

  } catch (error) {
    console.log(error, 'init-userInfo-error')
  }
};

const handleLogout = () => {
  showConfirmDialog({
    title: `确定要注销账号吗？`,
    message: '注销账号后，所有数据将被清除',
    confirmButtonText: '注销',
    cancelButtonText: '取消',
    confirmButtonColor:"#f50"
  })
    .then( async() => {
      try {
        const res = await userLogout(info.value?.id);
        if (res.code === 200) {
          showToast('注销账号成功');
          localStorage.clear();
          router.push('/')
        } else {
          showToast(res.msg);
        }
      } catch (error) {
        console.log(error, 'logout-error');

      }
    })
    .catch(() => {

    });
};

const handleQuit = () => {
  showConfirmDialog({
    title: `确定要退出登录吗？`,
  })
    .then(() => {
      showToast('退出登录成功');
      localStorage.clear();
      router.push('/')
    })
    .catch(() => {

    });
};


const statisticsInit = async () => {
  try {
    const { data = {} } = await getUserStatistics();
    statistics.value = data;

  } catch (error) {
    console.log(error, 'init-userInfo-error')
  }

};

onMounted(() => {
  init();
  statisticsInit();
});
</script>

<style lang="less" scoped>
header {
  width: 94%;
  margin: 0 auto;
}

.mine {
  &_header {
    width: 98%;
    box-sizing: border-box;
    padding: 8px;
    display: flex;
    align-items: center;

    &_info {
      width: 200px;
      margin-left: 16px;
      font-size: 14px;
      color: #333;
      &_desc{
        margin-top: 8px;
        font-size: 12px;
        color: #999;
      }
    }
  }
  &_nav{
    width: 94%;
    height:72px;
    margin: 0 auto;
  }
  &_statistics{
    display: flex;
    box-sizing: border-box;
    padding: 8px;
    &_item{
      flex: 1;
      height: 58px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      &_title{
        font-size: 14px;
        color: #333;
      }
      &_text{
        margin-top: 8px;
        font-size: 12px;
        color: #666;
      }
    }
  }
}

main {
  margin-top: 8px;
}
</style>
